<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>上传攻略</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 使用rem -->
    <link rel="stylesheet" href="assets/css/ydui.rem.css">
    <!-- 引入style.css -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- 使用rem，需另外引入ydui.flexible.js自适应类库 -->
    <script src="assets/js/ydui.flexible.js"></script>
    <!-- 引入Vue2.x -->
    <script src="assets/js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="assets/js/ydui.js"></script>
</head>

<body>
    <yd-layout id="app" style="display:none;" v-show="appShow">
        <yd-navbar slot="navbar" title="上传攻略">
            <a href="javascript:history.go(-1);" slot="left">
                <yd-navbar-back-icon></yd-navbar-back-icon>
            </a>
            <a href="javascript:void(0);" slot="right" @click="handleSumbit">确定 </a>
            <!--<yd-button class="btn-define-1" slot="right" @click="handleSumbit">确定</yd-button>-->
        </yd-navbar>

        <div class="content margin-2">
            <form>
           <!--  牌位材质 -->
                <yd-cell-group>
                    <template v-for="(item,index) in foxcaizhilist">
                    <yd-cell-item   style="position:relative;">
                        <span slot="left">文章标题: &nbsp;<span slot="left">{{item.name}}</span></span>
                        <button type="button" class="btn" slot="right" ><img src="assets/image/ico_jia.png" style="width:0.4rem;" @click="onShowSelectBox(index)"></button>
                        <img src="assets/image/ico_delete.png" width="12" alt="" style="position:absolute;top:0px;left:5px;" slot="left" @click="deleteCaizhi(index)"/>
                    </yd-cell-item>
                     <yd-cell-item v-if="item.src.length>0">
                        <div class="upload-list clearfix" slot="left" style="padding:0.16rem 0;">
                            <div v-for="(item,index) in item.src" class="item file-exist" style="width:1rem;height:1rem;">
                                <div class="file" ><img :src="item.src"/></div>
                            </div>
                        </div>
                    </yd-cell-item>
                  </template>
                    
                  <yd-cell-item>
                        <div class="block text-center" slot="right">
                            <button type="button" class="btn btn-text-3 underline" @click="onAddTaskOne">继续添加</button>
                        </div>
                    </yd-cell-item>
                </yd-cell-group>
                    <!--  牌位材质 -->



                     <!--  架子材质 -->

                    <!--  架子材质 -->
              <!--   组合效果 -->
              <!--   <p style="padding:10px 0.24rem;" class="yd-cell">图片1代表的是牌位1和材质1的组合，图片2代表牌位1和材质2的组合，以此类推。</p> -->
              
            <yd-cell-group v-for="(item,index) in imgList">
                    <yd-cell-item type="a" href="javascript:void(0);" @click.native="onClickFile3(index)">
                        <span slot="left">{{item.jz}}.{{item.cz}}</span>
                        <img slot="right" src="assets/image/ico_camera.png" style="width:0.49rem;height:0.41rem;" />
                    </yd-cell-item>
                    <yd-cell-item v-if="item.src.length>0">
                        <div class="upload-list clearfix" slot="left" style="padding:0.16rem 0;">
                            <div v-for="(item,indexa) in item.src" class="item file-exist">
                                <div class="file"><img :src="item.src" /></div>
                                <yd-button type="danger" size="small" class="delete" @click.native="onDeleteFile3(index,indexa)">4删除</yd-button>
                            </div>
                        </div>
                    </yd-cell-item>
                    <input type="file" :id="item.id" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" capture="camera" @change="onChaneFile3(index)" hidden="hidden">
                   </yd-cell-group> 
              <!--   组合效果 -->

            </form>
        </div>


        <!--牌位材质弹框-->
        <yd-popup v-model="selectModalShow" position="bottom" height="100%" class="yq-popup">
            <div slot="top">
                <yd-navbar title="添加攻略文章">
                    <a href="javascript:void(0);" slot="left" @click="selectModalShow = false">
                        取消
                    </a>
                    <yd-button class="btn-define-1" slot="right" @click.native="addFoxiangcaizhi">确定</yd-button>
                </yd-navbar>
            </div>
            <div class="yq-popup-content">
                    <yd-cell-group>
					
                        <yd-cell-item>
                            <span slot="left">攻略文字</span>
                            <yd-input slot="right" v-model="foxcaizhi_item.name" required placeholder="必填"></yd-input>
                        </yd-cell-item>

                         <yd-cell-item>
                            <span slot="left">地址</span>
                            <yd-input slot="right" v-model="foxcaizhi_item.size" required placeholder="必填"></yd-input>
                        </yd-cell-item>
						
						
                         
						 <yd-cell-item type="a" href="javascript:void(0);" @click.native="onClickFile">
                        <span slot="left">图片</span>
                        <img slot="right" src="assets/image/ico_camera.png" style="width:0.49rem;height:0.41rem;" />
                    </yd-cell-item>
					
                    <yd-cell-item v-if="foxcaizhi_item.src.length>0">
                        <div class="upload-list clearfix" slot="left" style="padding:0.16rem 0;">
                            <div v-for="(item,index) in foxcaizhi_item.src" class="item file-exist">
                                <div class="file"><img :src="item.src" /></div>
                                <yd-button type="danger" size="small" class="delete" @click.native="onDeleteFile(item,index)">3删除</yd-button>
                            </div>
                        </div>
                    </yd-cell-item>
                    <input type="file" id="fileImagea" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" capture="camera" @change="onChaneFile" hidden="hidden">
                   </yd-cell-group>
            </div>
        </yd-popup>
        <!--end-->

        <!--end-->
    </yd-layout>
    <script src="assets/js/jquery.min.js"></script>
    <script>
        var appVue = new Vue({
            el: '#app',
            data: function () {
                return {
                    appShow: true,
                    selectIndex:null,
                    selectIndex2:null,
                    selectModalShow: false,
                    selectModalShow2: false,
                    fileImagecanshu:null,
                    imgList:[
                        {
                            src:[],
                            id:'fileImage0',
                            name:"",
                            jz:1,
                        }
                    ],
                    jiazicaizhi_item:{
                            src:[],
                            name:"",
                            guige:"",
                            status:0,
                            isJihuo:0, 
                            price:"",
                    },
                    foxcaizhi_item:{
                           src:[],
                            name:"",
                            changdu:"",
                            price:"",
                            guige:"",
                            status:0,
                            isJihuo:0,
                            size:"",
                    },
                    jiazicaizhilist:
                        [
                            {
                                id:1,
                                src:[],
                                name:"",
                                guige:"",
                                status:0,
                                isJihuo:0, 
                                price:"",
                             },
                       ],
                    foxcaizhilist:
                    [
                        {
                            id:1,    
                            src:[],
                            name:"",
                            changdu:"",
                            price:"",
                            guige:"",
                            status:0,
                            isJihuo:0,
                            size:"",
                         }
                   ]
                }
            },
             mounted: function () {
             
            },
            methods: {
                deleteCaizhi:function(index){
                    if(this.foxcaizhilist.length>1){
                        var id =  this.foxcaizhilist[index].id;
                    this.foxcaizhilist.splice(index,1); 
                    this.removeAmmount(1,id);
                    }
                    
                },
                deleteCaizhi2:function(index){
                   
                    if(this.jiazicaizhilist.length>1){
                        var id = this.jiazicaizhilist[index].id;
                    this.jiazicaizhilist.splice(index,1); 
                    this.removeAmmount(2,id);
                    }
                },
                onClickFile: function () { //点击上传图片事件
                    document.getElementById("fileImagea").click();
                },
                onClickFile2: function () { //点击上传图片事件
                    document.getElementById("fileImagea2").click();
                },
                 onClickFile3: function (index) { //点击上传图片事件
                    var ida="fileImage"+(index);
                    console.log(ida);
                    document.getElementById(ida).click();
                },
                 onChaneFile3: function (index) { //
                    var vm = this;
                     var ida="fileImage"+(index);
                    var file = document.getElementById(ida).files[0];
                    if (file) {
                        if (!/image\/\w+/.test(file.type)) {
                            alert("必须上传图片！");
                            return false;
                        }
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onloadstart = function () {
                            console.log('开始读取')
                        }
                        reader.onprogress = function () {
                            console.log('正在读取.....')
                        }
                        reader.onload = function (e) {
						
						    $.ajax({
        url: './glphotoapi.php',
        type: 'POST',
        dataType: 'json',
        data: {img:e.target.result},
      })
      .done(function(respon) {
        if (respon.error==0) {
var photo=respon.img;
                             vm.imgList[index].src.push({
                                src: photo
                            });
                            console.log(vm.imgList[index].src);     
        }else{

        }
      })
						
 
                        }
                        reader.onabort = function () {
                            console.log('读取中断！！')
                        }
                        reader.onerror = function () {
                            console.log('读取出现错误！！')
                        }
                        reader.onloadend = function () {
                            console.log('FileReader读取步骤执行完毕')
                        }
                    }
                },
                onChaneFile: function () { //
                    var vm = this;
                    var file = document.getElementById('fileImagea').files[0];
                    if (file) {
                        if (!/image\/\w+/.test(file.type)) {
                            alert("必须上传图片！");
                            return false;
                        }
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onloadstart = function () {
                            console.log('开始读取')
                        }
                        reader.onprogress = function () {
                            console.log('正在读取.....')
                        }
                        reader.onload = function (e) {

						$.ajax({
                        url: './glphotoapi.php',
                        type: 'POST',
                        dataType: 'json',
                        data: {img:e.target.result},
                         })
                        .done(function(respon) {
                        if (respon.error==0) {
                          var photo=respon.img;
                              vm.imgList[vm.selectIndex].src.push({
                                src: photo
                            });
                            console.log(vm.imgList[vm.selectIndex].src);     
                         }else{
                          }
                         })					
							
	
                        }
                        reader.onabort = function () {
                            console.log('读取中断！！')
                        }
                        reader.onerror = function () {
                            console.log('读取出现错误！！')
                        }
                        reader.onloadend = function () {
                            console.log('FileReader读取步骤执行完毕')
                        }
                    }
                },
                  onChaneFile2: function () { //
                    var vm = this;
                    var file = document.getElementById('fileImagea2').files[0];
                    if (file) {
                        if (!/image\/\w+/.test(file.type)) {
                            alert("必须上传图片！");
                            return false;
                        }
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onloadstart = function () {
                            console.log('开始读取')
                        }
                        reader.onprogress = function () {
                            console.log('正在读取.....')
                        }
                        reader.onload = function (e) {
						
						

		$.ajax({
        url: './glphotoapi.php',
        type: 'POST',
        dataType: 'json',
        data: {img:e.target.result},
      })
      .done(function(respon) {
        if (respon.error==0) {
var photo=respon.img;
                                vm.imgList[vm.selectIndex2].src.push({
                                src: photo
                            });
                            console.log(vm.imgList[vm.selectIndex2].src);     
        }else{

        }
      })	
							
							
                        }
                        reader.onabort = function () {
                            console.log('读取中断！！')
                        }
                        reader.onerror = function () {
                            console.log('读取出现错误！！')
                        }
                        reader.onloadend = function () {
                            console.log('FileReader读取步骤执行完毕')
                        }
                    }
                },
               
                onDeleteFile: function (item,index) {
                     this.foxcaizhi_item.src=[];
					
                },
                 onDeleteFile2: function (index) {
                     this.jiazicaizhi_item.src=[];
                },
                 onDeleteFile3: function (index,indexa) {
                    this.imgList[index].src=[];
                },
                handleSumbit: function () {

                  $.ajax({
        url: 'gonglueapi.php',
        type: 'POST',
        dataType: 'json',
        data: {sname: this.jiazicaizhi_item},
      })
      .done(function(respon) {
        if (respon.error==0) {
             layer.open({
    content: '删除成功'
    ,skin: 'msg'
    ,time: 2 //2秒后自动关闭
  });
      
        }else{
            
        
        }
      })
			  
			  
			  
			  
			  
			  

				//确实提交
                    this.$dialog.toast({
                        mes: '提交成功！',
                        timeout: 1500,
                        icon: 'success'
                    });
					  console.log(this.imgList);
					   console.log('213');
					return false;
                    window.location.href="index.html";
                },
                onShowSelectBox: function (index) { //  显示牌位材质
                this.selectIndex=index;
                this.selectModalShow = true;
                this.foxcaizhi_item=this.foxcaizhilist[index];
                },
                 onShowSelectBox2: function (index) { //  显示架子材质
                this.selectIndex2=index;
                this.selectModalShow2 = true;
                this.jiazicaizhi_item=this.jiazicaizhilist[index];
                },
                addFoxiangcaizhi:function(){
               this.foxcaizhilist[this.selectIndex]=this.foxcaizhi_item;
                    this.selectModalShow = false;
                },
                addJiazicaizhi:function(){
                    this.jiazicaizhilist[this.selectIndex2]=this.jiazicaizhi_item;
                    this.selectModalShow2 = false;
                },
                onAddTaskOne: function () { //新增一条牌位材质
                     var i=this.foxcaizhilist[this.foxcaizhilist.length-1].id;
                     i++;
                    this.foxcaizhilist.push({
                            id:i,
                            src:[],
                            name:"",
                            changdu:"",
                            price:"",
                            guige:"",
                            status:0,
                            isJihuo:0,
                            size:"",
                        });
                     this.calculateAmmount(1);
                     this.onShowSelectBox(this.foxcaizhilist.length-1);
                },
                onAddTaskOne2: function () { //新增一条架子材质

                    var i=this.jiazicaizhilist[this.jiazicaizhilist.length-1].id;
                     i++;
                    this.jiazicaizhilist.push({
                            id:i,
                            src:[],
                            name:"",
                            guige:"",
                            status:0,
                            isJihuo:0, 
                            price:"",
                        });
                     this.calculateAmmount(2);
                     this.onShowSelectBox2(this.jiazicaizhilist.length-1);
                },
                 calculateAmmount:function(flag){
                        var vm = this;
                        if(flag ==1){
                                //添加牌位材质
                                //
                            var length = vm.foxcaizhilist.length;
                            var czId = vm.foxcaizhilist[length-1].id;

                            vm.jiazicaizhilist.forEach(function(item){
                                vm.imgList.push({
                                    src:[],
                                    id:'fileImage'+(vm.imgList.length),
                                    cz:czId,
                                    jz:item.name,
									name:item.name,
                                });
                    })

                    }else{
                        //添加架子材质
                        var length = vm.jiazicaizhilist.length;
                        var jzId = vm.jiazicaizhilist.name;

                        vm.foxcaizhilist.forEach(function(item){
                
                            vm.imgList.push({
                                src:[],
                                id:'fileImage'+(vm.imgList.length),
                                cz:item.id,
                                jz:jzId,
								
                            });
                        })
                    }
                    console.log( vm.imgList);
                 },
                 removeAmmount:function(flag,id){
                    var vm = this;
                    if(flag ==1)
                    {
                        for(var i=0;i<vm.imgList.length;i++){

                            if(vm.imgList[i].cz == id){
                               vm.imgList.splice(i,1);
                            }
                        }
                       
                    }else{

                    for(var i=0;i<vm.imgList.length;i++){

                            if(vm.imgList[i].jz == id){
                               vm.imgList.splice(i,1);
                            }
                        }

                    }

                 }
            }
        });
    </script>
</body>
</html>